<template>
  <view class="container">
    <u-tabs
      :list="tabList"
      :is-scroll="false"
      :current="curTab"
      active-color="#FA2209"
      :duration="0.2"
      @change="onChangeTab"
    />

<view style="height: 100rpx"  v-if="list.length === 0"></view>
    <u-empty v-if="list.length === 0" text="暂无收藏" mode="favor"></u-empty>

    <ff-comments :list="list" @handelClick="handelClick" />
    <!-- </mescroll-body> -->
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
import Empty from '@/components/empty';
import cardStyle from '@/components/card-style';
import ffComments from '@/components/ff-comments';
import { getEmptyPaginateObj, getMoreListData } from '@/core/app';
import * as MaterialApi from '@/api/material/index';
import storage from '@/utils/storage';

export default {
  components: {
    Empty,
    cardStyle,
    ffComments,
  },
  mixins: [MescrollMixin],
  data() {
    return {
      //当前页面参数
      options: {},
      curTab: 0,
      tabList: [
        // {
        //   name: `点赞`,
        // },
        // {
        //   name: `收藏`,
        // },
      ],
      list: [],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 当前页面参数
    this.options = options;
    this.getMaterialList();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    async getMaterialList(pageNo = 1) {
      try {
        uni.showLoading({ title: '加载中' });

        const _res = await MaterialApi.list({
          category_id: 1,
          page: pageNo,
        });

        const _listData = getMoreListData(
          {
            data: _res.data.list.data,
          },
          {
            data: this.list,
          },
          pageNo,
        );

        const _currentInfo = storage.get('user_material');

        console.log('_listData_listData', {
          _listData,
          keys: Object.keys(_currentInfo),
          _currentInfo,
        });
        const _keys = Object.keys(_currentInfo);

        this.list = _listData.filter(
          (item) => {
            return _currentInfo[item.material_id].is_collect ? true : false;
          },
          // _keys.includes(item.material_id + ''),
        );

        this.list.forEach((_item) => {
          const _is_collect =
            _currentInfo[_item.material_id] &&
            _currentInfo[_item.material_id].is_collect;

          const _is_like =
            _currentInfo[_item.material_id] &&
            _currentInfo[_item.material_id].is_like;
          // 收藏次数
          _item.collect = _is_collect ? 1 : 0;
          _item.likes = _is_like ? 1 : 0;
          _item.download = 0;
          _item.forward = 0;

          // 是否已经收藏
          _item.is_collect = _is_collect;

          // 是否已经点赞
          _item.is_like = _is_like;
        });

        uni.hideLoading();

        console.log('listlistlistlist', this.list);
      } catch (error) {
        console.log('error', error);
      }
    },
    // 刷新评价列表
    onRefreshList() {
      this.list = getEmptyPaginateObj();

      this.getMaterialList();
    },

    onChangeTab(index) {
      const app = this;
      // 设置当前选中的标签
      app.curTab = index;
      // 刷新评价列表
      app.onRefreshList();
    },

    handelClick(_item, _type) {
      const _currentInfo = storage.get('user_material');

      // 收藏
      if (_type === 'collect') {
        storage.set('user_material', {
          ..._currentInfo,
          [_item.material_id]: {
            ..._currentInfo[_item.material_id],
            is_collect: true,
          },
        });
      }

      // 取消收藏
      if (_type === 'unCollect') {
        storage.set('user_material', {
          ..._currentInfo,
          [_item.material_id]: {
            ..._currentInfo[_item.material_id],
            is_collect: false,
          },
        });
      }

      if (_type === 'like') {
        storage.set('user_material', {
          ..._currentInfo,
          [_item.material_id]: {
            ..._currentInfo[_item.material_id],
            is_like: true,
          },
        });
      }

      if (_type === 'unLike') {
        storage.set('user_material', {
          ..._currentInfo,
          [_item.material_id]: {
            ..._currentInfo[_item.material_id],
            is_like: false,
          },
        });
      }

      // if (_type === "download") {
      //   downloadImage(_item.external_url, _item.title);
      // }

      this.getMaterialList();
    },
  },
};
</script>

<style lang="scss" scoped>
.addres-list {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}

// 项目内容
.address-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

.contacts {
  font-size: 30rpx;
  margin-bottom: 16rpx;

  .name {
    margin-right: 16rpx;
  }
}

.address {
  font-size: 28rpx;

  .region {
    margin-right: 10rpx;
  }
}

.line {
  margin: 20rpx 0;
  border-bottom: 1rpx solid #f3f3f3;
}

.item-option {
  display: flex;
  justify-content: space-between;
  height: 48rpx;

  // 单选框
  .item-radio {
    font-size: 28rpx;

    .radio {
      vertical-align: middle;
      transform: scale(0.76);
    }

    .text {
      vertical-align: middle;
    }
  }

  // 操作
  .events {
    display: flex;
    align-items: center;
    line-height: 48rpx;

    .event-item {
      font-size: 28rpx;
      margin-right: 26rpx;
      color: #4c4c4c;

      &:last-child {
        margin-right: 0;
      }

      .title {
        margin-left: 8rpx;
      }
    }
  }
}

// 底部操作栏
.footer-fixed {
  position: fixed;
  bottom: var(--window-bottom);
  left: 0;
  right: 0;
  z-index: 11;
  box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
  background: #fff;

  // 设置ios刘海屏底部横线安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .btn-wrapper {
    height: 120rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 80rpx;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);
  }
}

.search-wrapper {
  display: flex;
  height: 64rpx;
  padding-left: 30rpx;
}

// 搜索输入框
.search-input {
  width: 80%;
  background: #fff;
  border-radius: 10rpx 0 0 10rpx;
  box-sizing: border-box;
  overflow: hidden;

  .search-input-wrapper {
    display: flex;

    .left {
      display: flex;
      width: 60rpx;
      justify-content: center;
      align-items: center;

      .search-icon {
        display: block;
        color: #b4b4b4;
        font-size: 28rpx;
      }
    }

    .right {
      flex: 1;

      input {
        font-size: 28rpx;
        height: 64rpx;
        display: flex;
        align-items: center;

        .input-placeholder {
          color: #aba9a9;
        }
      }
    }
  }
}

// 搜索按钮
.search-button {
  //   width: 20%;
  box-sizing: border-box;

  .button {
    height: 64rpx;
    font-size: 28rpx;
    border-radius: 0 5px 5px 0;
    background: #fa2209;
    display: flex;
    align-items: center;
  }
}
</style>
